<template>
	<view>
		<view class="hm-p-tb-20">
			<u-swiper :list="userInfo.v.grade.vip" keyName="card_cover" @change="change" :autoplay="false"
				previousMargin="30" nextMargin="30" radius="8" indicator circular>
			</u-swiper>
		</view>
		<view class="title">
			<view class="hm-dis-block-inline">
				<u-icon name="level" size="30" color="#333" bold></u-icon>
			</view>
			<text class="lv">{{lv+1}}</text>会员特权<text class="discount">需要{{userInfo.v.grade.vip[lv].score}}成长值</text>
		</view>
		<view class="hm-p-lr-20">
			<view class="menu">
				会员权益
				<view class="navbar-list" v-if="userInfo.v.grade.vip[lv].discount">
					<image :src="applet.domain + '/addons/pt/user/discount.png'"></image>{{userInfo.v.grade.vip[lv].discount / 10}}折特权
				</view>
				<view class="navbar-list" :class="userInfo.v.grade.vip[lv].free_delivery == 1?'hm-border-t':''"
					v-if="userInfo.v.grade.vip[lv].free_delivery == 1">
					<image :src="applet.domain + '/addons/pt/user/delivery.png'"></image>免配送费
				</view>
			</view>
			<view class="menu">
				升级礼包
				<view v-for="(item,index) in userInfo.v.grade.vip[lv].gift" :key="index">
					<view class="navbar-list" :class="index > 0 ?'hm-border-t':''">
						<image :src="applet.domain + '/addons/pt/user/coupon.png'"></image>{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
		<view v-if="action == 'vip'" class="hm-footer-fixed">
			<view class="hm-p-lr-b25 hm-w-b100">
				<view v-if="userInfo.v.grade.buy_price > 0">
					<u-button @click="cashier_show = true" type="success"
						:text="'支付￥'+userInfo.v.grade.buy_price+'，开通会员'"></u-button>
				</view>
				<view v-else>
					<u-button @click="openVip" type="success" text="免费开通会员"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="cashier_show" @close="cashier_show = false" mode="center" round="8" :closeable="true">
			<view class="hm-popup">
				<view class="hm-p-b-20 hm-border-b hm-text-center">支付收银台</view>
				<view class="hm-p-tb-50 hm-text-center">
					<view class="hm-font-b hm-col-0">
						￥<text class="hm-font-100">{{userInfo.v.grade.buy_price}}</text>
					</view>
					<view class="hm-font-28 hm-col-content">购买会员卡</view>
				</view>
				<!-- #ifdef H5 || MP-WEIXIN -->
				<view v-if="mp=='weixin'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(1)">
					<view class="hm-m-r-15 hm-dis-block-inline">
						<u-icon name="weixin-circle-fill" size="20" color="#19be6b"></u-icon>
					</view>
					微信
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==1" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 || MP-ALIPAY -->
				<view v-if="mp=='alipay'||mp=='other'" class="hm-p-20 hm-border-t hm-font-26" @click="setPay(4)">
					<view class="hm-dis-block-inline hm-m-r-15">
						<u-icon name="zhifubao-circle-fill" size="20" color="#2979ff"></u-icon>
					</view>
					支付宝
					<view class="hm-fr hm-dis-block-inline">
						<u-icon name="checkbox-mark" v-if="pay_mode==4" size="25" color="#fa3534"></u-icon>
					</view>
				</view>
				<!-- #endif -->
				<view class="hm-p-t-50">
					<view class="hm-p-lr-b25">
						<u-button type="error" @click="payment" text="确定支付"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const App = getApp();

	export default {
		data() {
			return {
				action: 'vip',
				userInfo: {},
				applet: {},
				mp: '', //平台类型
				lv: 0,
				pay_mode: 1, //默认 1微信支付 4支付宝支付
				cashier_show: false, //收银台
			};
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.action = options.action;
			if (options.action == 'vip') {
				uni.setNavigationBarTitle({
					title: '开通会员'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '会员权益'
				});
			}
			_this.applet = uni.getStorageSync('applet');
			// #ifdef MP-WEIXIN
			_this.mp = 'weixin';
			// #endif
			// #ifdef MP-ALIPAY
			_this.mp = 'alipay';
			_this.pay_mode = 4;
			// #endif
			// #ifdef H5
			_this.mp = uni.getStorageSync('browser') || '';
			if (_this.mp == 'alipay') {
				_this.pay_mode = 4;
			}
			// #endif
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			_this.getUserDetail();
		},

		methods: {

			/**
			 * 购买会员
			 */
			payment() {
				let _this = this;
				let money = _this.userInfo.v.grade.buy_price;
				if (money == '' || money == 0) {
					App.showError('付款金额不可为空');
					return false;
				}
				let formData = {
					money: money,
					pay_mode: _this.pay_mode,
				};
				// #ifdef H5
				formData.browser = _this.mp;
				// #endif
				let callback = function(result) {
					_this.cashier_show = false;
					if (result.code === -10) {
						App.showError(result.msg);
						return false;
					}
					// 发起微信支付
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						timeStamp: result.data.payment.timeStamp,
						nonceStr: result.data.payment.nonceStr,
						package: result.data.payment.package,
						signType: result.data.payment.signType,
						paySign: result.data.payment.paySign,
						success: function(res) {
							App.showSuccess('支付成功', function() {
								uni.navigateBack();
							});
						},
						fail: function(res) {
							let msg = '支付失败';
							if (res.errMsg == 'requestPayment:fail cancel') {
								msg = '用户取消支付';
							}
							App.showError(msg);
						}
					});
					//#endif
					//#ifdef H5
					//微信支付
					if (_this.pay_mode == 1) {
						if (_this.mp == 'weixin') {
							WeixinJSBridge.invoke('getBrandWCPayRequest', {
								'appId': result.data.payment.appId,
								'timeStamp': result.data.payment.timeStamp,
								'nonceStr': result.data.payment.nonceStr,
								'package': result.data.payment.package,
								'signType': result.data.payment.signType,
								'paySign': result.data.payment.paySign
							}, function(res) {
								let msg = '支付成功';
								if (res.err_msg === 'get_brand_wcpay_request:ok') {
									//支付成功
									App.showSuccess('支付成功', function() {
										uni.navigateBack();
									});
								} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
									msg = '用户取消支付';;
								} else if (res.err_msg === 'get_brand_wcpay_request:fail') {
									msg = '支付失败';;
								}
								App.showError(msg);
							});
						}
						if (_this.mp == 'other') {
							document.location.href = result.data.payment;
						}
					}
					//支付宝支付
					if (_this.pay_mode == 4) {
						const div = document.createElement('div');
						div.innerHTML = result.data.payment;
						document.body.appendChild(div);
						document.forms['alipaysubmit'].submit();
					}
					//#endif
					// #ifdef MP-ALIPAY
					uni.requestPayment({
						orderInfo: result.data.payment.trade_no,
						success: function(res) {
							if (res.resultCode != '9000') {
								App.showError(res.memo);
								return false;
							}
							App.showSuccess('支付成功', function() {
								uni.navigateBack();
							});
						}
					});
					//#endif
				};
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.index/buyVip', formData, function(result) {
					callback(result);
				});
			},
			/**
			 * 开通会员
			 */
			openVip() {
				let _this = this;
				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});
				App._post_form('user.index/openVip', {}, function(result) {
					uni.hideLoading();
					App.showSuccess(result.msg, function() {
						uni.navigateBack();
					});
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.userInfo = result.data;
				});
			},
			change(e) {
				let _this = this;
				_this.lv = e.current;
			}

		}
	};
</script>
<style lang="scss" scoped>
	.title {
		font-weight: bold;
		color: #333;
		text-align: center;
		padding-bottom: 20rpx;

		.lv {
			margin: 0rpx 10rpx 0rpx -15rpx;
		}

		.discount {
			color: #999;
			font-size: 24rpx;
			margin-left: 10rpx;
			font-weight: normal;
		}
	}

	.menu {
		margin-top: 20rpx;
		border-radius: 8rpx;
		padding: 20rpx;
		background-color: #fff;

		.navbar-list {
			padding: 20rpx;
			line-height: 50rpx;

			image {
				float: left;
				margin-right: 20rpx;
				height: 50rpx;
				width: 50rpx;
			}
		}
	}
</style>